<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta http-equiv="x-ua-compatible" content="ie=edge">-->
<!--    <title>房产交易平台</title>-->
<!--    <meta name="description" content="">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
<!--    &lt;!&ndash; Place favicon.ico in the root directory &ndash;&gt;-->
<!--    <link th:href="@{/assets/images/favicon.ico}" type="img/x-icon" rel="shortcut icon">-->
<!--    &lt;!&ndash; All css files are included here. &ndash;&gt;-->
<!--    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">-->
<!--    <link rel="stylesheet" th:href="@{/assets/css/iconfont.min.css}">-->
<!--    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">-->
<!--    <link rel="stylesheet" th:href="@{/assets/css/helper.css}">-->
<!--    <link rel="stylesheet" th:href="@{/assets/css/style.css}">-->
<!--    &lt;!&ndash; Modernizr JS &ndash;&gt;-->
<!--    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>-->
<!--</head>-->
<head th:replace="layout :: head(${title},${desc})"></head>
<body>


<div id="main-wrapper">

    <!--Header section start-->
<!--    <header class="header header-sticky">-->
<!--        <div class="header-bottom menu-center">-->
<!--            <div class="container">-->
<!--                <div class="row justify-content-between">-->

<!--                    &lt;!&ndash;Logo start&ndash;&gt;-->
<!--                    <div class="col mt-10 mb-10">-->
<!--                        <div class="logo">-->
<!--                            <a th:href="@{/templates/map.html}"><img src="assets/images/logo.png" alt=""></a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    &lt;!&ndash;Logo end&ndash;&gt;-->

<!--                    &lt;!&ndash;Menu start&ndash;&gt;-->
<!--                    <div class="col d-none d-lg-flex">-->
<!--                        <nav class="main-menu">-->
<!--                            <ul>-->
<!--                                <li class="has-dropdown"><a th:href="@{/templates/map.html}">主页</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li><a th:href="@{/templates/map.html}">默认主题的主页</a></li>-->
<!--                                        <li><a th:href="@{/index-2.html}">带推荐广告的主页</a></li>-->
<!--                                        <li><a th:href="@{/index-3.html}">带地图显示的主页</a></li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                                <li class="has-dropdown"><a th:href="@{/properties.html}">房产</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li class="has-dropdown"><a th:href="@{/properties.html}">房产格局显示</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/properties.html}">默认格局</a></li>-->
<!--                                                <li><a th:href="@{/properties-left-sidebar.html}">左倾式格局</a></li>-->
<!--                                                <li><a th:href="@{/properties-right-sidebar.html}">右倾式格局</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                        <li class="has-dropdown"><a th:href="@{/properties-list-left-sidebar.html}">房产列表显示</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/properties-list-left-sidebar.html}">左倾式</a></li>-->
<!--                                                <li><a th:href="@{/properties-list-right-sidebar.html}">右倾式</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                        <li class="has-dropdown"><a th:href="@{/properties-carousel.html}">房产阶梯式显示</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/properties-carousel.html}">单个阶梯</a></li>-->
<!--                                                <li><a th:href="@{/properties-carousel2.html}">两个阶梯</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                        <li class="has-dropdown"><a th:href="@{/single-properties.html}">单个房产显示</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/single-properties.html}">左倾式</a>></li>-->
<!--                                                <li><a th:href="@{/single-properties-right-sidebar.html}">右倾式</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                                <li class="has-dropdown"><a th:href="@{/agencies.html}">房产代理</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li class="has-dropdown"><a th:href="@{/agents.html}">代理人显示方式</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/agents-3-column.html}">三列显示</a></li>-->
<!--                                                <li><a th:href="@{/agents.html}">四列显示</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                        <li class="has-dropdown"><a th:href="@{/agents-carousel-3-column.html}">带阶梯房产代理人显示方式</a>-->
<!--                                            <ul class="sub-menu">-->
<!--                                                <li><a th:href="@{/agents-carousel-3-column.html}">三列显示</a></li>-->
<!--                                                <li><a th:href="@{/agents-carousel2-3-column.html}">三列四行显示</a></li>-->
<!--                                                <li><a th:href="@{/agents-carousel-4-column.html}">四列显示</a></li>-->
<!--                                                <li><a th:href="@{/agents-carousel2-4-column.html}">四列两行</a></li>-->
<!--                                            </ul>-->
<!--                                        </li>-->
<!--                                        <li><a th:href="@{/agent-details.html}">代理人详情</a></li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                                <li class="has-dropdown"><a th:href="@{/agencies.html}">房产代理商</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li><a th:href="@{/agencies.html}">房产代理商</a></li>-->
<!--                                        <li><a th:href="@{/agency-details.html}">代理商详情</a></li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                                <li class="has-dropdown"><a th:href="@{/news.html}">房产新闻</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li><a th:href="@{/news.html}">默认方式显示</a></li>-->
<!--                                        <li><a th:href="@{/news-left-sidebar.html}">左倾式</a></li>-->
<!--                                        <li><a th:href="@{/news-right-sidebar.html}">右倾式</a></li>-->
<!--                                        <li><a th:href="@{/news-carousel.html}">单阶梯式</a></li>-->
<!--                                        <li><a th:href="@{/news-carousel2.html}">两阶梯式</a></li>-->
<!--                                        <li><a th:href="@{/news-details.html}">详情左倾式显示</a></li>-->
<!--                                        <li><a th:href="@{/news-details-right-sidebar.html}">详情右倾式显示</a></li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                                <li class="has-dropdown"><a th:href="@{/#index.html}">展示页面</a>-->
<!--                                    <ul class="sub-menu">-->
<!--                                        <li><a th:href="@{/about-us.html}">关于我们</a></li>-->
<!--                                        <li><a th:href="@{/add-properties.html}">添加房产</a></li>-->
<!--                                        <li><a th:href="@{/contact-us.html}">联系我们</a></li>-->
<!--                                        <li><a th:href="@{/gallery-2-column.html}">2列画廊展示</a></li>-->
<!--                                        <li><a th:href="@{/gallery-3-column.html}">3列画廊展示</a></li>-->
<!--                                        <li><a th:href="@{/gallery-4-column.html}">4列画廊展示</a></li>-->
<!--                                        <li><a th:href="@{/login-register.html}">登录和注册</a></li>-->
<!--                                        <li><a th:href="@{/my-account.html}">我的帐号</a></li>-->
<!--                                    </ul>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </nav>-->
<!--                    </div>-->
<!--                    &lt;!&ndash;Menu end&ndash;&gt;-->

<!--                    &lt;!&ndash;User start&ndash;&gt;-->
<!--                    <div class="col mr-sm-50 mr-xs-50">-->
<!--                        <div class="header-user">-->
<!--                            <a th:href="@{/login-register.html}" class="user-toggle"><i class="pe-7s-user"></i><span>登录或注册</span></a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    &lt;!&ndash;User end&ndash;&gt;-->
<!--                </div>-->

<!--                &lt;!&ndash;Mobile Menu start&ndash;&gt;-->
<!--                <div class="row">-->
<!--                    <div class="col-12 d-flex d-lg-none">-->
<!--                        <div class="mobile-menu"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;Mobile Menu end&ndash;&gt;-->

<!--            </div>-->
<!--        </div>-->
<!--    </header>-->
    <!-- 引入公共的头部样式 -->
    <header th:replace="layout :: header"></header>
    <!--Header section end-->

    <!--Hero Section start-->
    <div class="hero-section section position-relative">

        <!--Hero Map-->
        <div id="hero-map"></div>

        <!--Hero Map Property Controler-->
        <div class="map-property-controls"></div>

    </div>
    <!--Hero Section end-->

    <!--Search Section section start-->
    <div class="search-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>找到您的房子</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">
                <div class="col">

                    <!--Property Search start-->
                    <div class="property-search">

                        <form action="#index.html}">

                            <div>
                                <input type="text" placeholder="位置">
                            </div>

                            <div>
                                <select class="nice-select">
                                    <option>所有城市</option>
                                    <option>北京</option>
                                    <option>上海</option>
                                    <option>广州</option>
                                    <option>深圳</option>
                                    <option>成都</option>
                                    <option>重庆</option>
                                    <option>武汉</option>
                                    <option>沈阳</option>
                                    <option>福州</option>
                                    <option>厦门</option>
                                    <option>银川</option>
                                    <option>拉萨</option>
                                    <option>绵阳</option>
                                    <option>遂宁</option>
                                    <option>攀枝花</option>
                                    <
                                    <option>简阳</option>
                                    <option>德阳</option>
                                    <option>金堂</option>
                                    <option>泸州</option>
                                    <option>内江</option>
                                    <option>阆中</option>
                                </select>
                            </div>

                            <div>
                                <select class="nice-select">
                                    <option>租房</option>
                                    <option>卖房</option>
                                </select>
                            </div>

                            <div>
                                <select class="nice-select">
                                    <option>类型</option>
                                    <option>公寓</option>
                                    <option>咖啡馆</option>
                                    <option>住宅</option>
                                    <option>餐馆</option>
                                    <option>商店</option>
                                    <option>别墅</option>
                                </select>
                            </div>

                            <div>
                                <select class="nice-select">
                                    <option>房间数</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </div>

                            <div>
                                <select class="nice-select">
                                    <option>卫生间数</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </div>

                            <div>
                                <div id="search-price-range"></div>
                            </div>

                            <div>
                                <button>搜索</button>
                            </div>

                        </form>

                    </div>
                    <!--Property Search end-->

                </div>
            </div>

        </div>
    </div>
    <!--Search Section section end-->

    <!--Feature property section start-->
    <div class="property-section section bg-gray pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>特色房产</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">

                <!--Property Slider start-->
                <div class="property-carousel section">

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-1.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">江南宅院</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png" alt="">锦江区东大街下东大街568号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥550<span>月</span></span>
                                        <span class="type">出租</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <span class="label">特色</span>
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-2.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">木马山别墅</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png" alt="">城北大道450附22号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥2550</span>
                                        <span class="type">出售</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <span class="label">热门</span>
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-3.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">皇家一号公寓</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png"
                                                                alt="">锦江区福字街215号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥550<span>月</span></span>
                                        <span class="type">出租</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-4.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">龙城一号别墅</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png" alt="">龙泉驿区南山大道333号附12号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥550<span>月</span></span>
                                        <span class="type">出租</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-5.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">春天花园别墅</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png" alt="">金牛区琴台西路668号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥2550</span>
                                        <span class="type">出售</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                    <!--Property start-->
                    <div class="property-item col">
                        <div class="property-inner">
                            <div class="image">
                                <span class="label">特色</span>
                                <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-6.jpg"
                                                                             alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="">550 平米</span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="">6</span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="">4</span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="">3</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{/single-properties.html}">万科西山别墅</a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png"
                                                                alt="">高新区蜀都大道12号</span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price">￥550<span>月</span></span>
                                        <span class="type">出租</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->

                </div>
                <!--Property Slider end-->

            </div>

        </div>
    </div>
    <!--Feature property section end-->

    <!--Welcome 房产交易平台section-->
    <div class="feature-section feature-section-border-top section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-60 pb-lg-40 pb-md-30 pb-sm-20 pb-xs-10">
        <div class="container">
            <div class="row row-25 align-items-center">

                <!--Feature Image start-->
                <div class="col-lg-5 col-12 order-1 order-lg-2 mb-40">
                    <div class="feature-image"><img src="assets/images/others/feature.png" alt=""></div>
                </div>
                <!--Feature Image end-->

                <div class="col-lg-7 col-12 order-2 order-lg-1 mb-40">
                    <div class="feature-wrap row row-25">

                        <!--Feature start-->
                        <div class="col-sm-6 col-12 mb-50">
                            <div class="feature">
                                <div class="icon"><i class="pe-7s-piggy"></i></div>
                                <div class="content">
                                    <h4>低价房</h4>
                                    <p>便宜无好货，好货不便宜。。。请消费者自律呢</p>
                                </div>
                            </div>
                        </div>
                        <!--Feature end-->

                        <!--Feature start-->
                        <div class="col-sm-6 col-12 mb-50">
                            <div class="feature">
                                <div class="icon"><i class="pe-7s-display1"></i></div>
                                <div class="content">
                                    <h4>优质房源</h4>
                                    <p>便宜无好货，好货不便宜。。。请消费者自律呢</p>
                                </div>
                            </div>
                        </div>
                        <!--Feature end-->

                        <!--Feature start-->
                        <div class="col-sm-6 col-12 mb-50">
                            <div class="feature">
                                <div class="icon"><i class="pe-7s-map"></i></div>
                                <div class="content">
                                    <h4>最容易查找房源</h4>
                                    <p>便宜无好货，好货不便宜。。。请消费者自律呢</p>
                                </div>
                            </div>
                        </div>
                        <!--Feature end-->

                        <!--Feature start-->
                        <div class="col-sm-6 col-12 mb-50">
                            <div class="feature">
                                <div class="icon"><i class="pe-7s-shield"></i></div>
                                <div class="content">
                                    <h4>最可靠房源</h4>
                                    <p>便宜无好货，好货不便宜。。。请消费者自律呢</p>
                                </div>
                            </div>
                        </div>
                        <!--Feature end-->

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--Welcome 房产交易平台section end-->

    <!--Download apps section start-->
    <div class="download-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50"
         style="background-image: url(assets/images/bg/download-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!--Download Content start-->
                    <div class="download-content">
                        <h1>下载 <span>老九学堂</span> App <br>获取最新最优质房源信息</h1>
                        <div class="buttons">
                            <a th:href="@{/#index.html}">
                                <i class="fa fa-apple"></i>
                                <span class="text">

                                    Apple Store
                                </span>
                            </a>
                            <a th:href="@{/#index.html}">
                                <i class="fa fa-android"></i>
                                <span class="text">

                                    Google Play
                                </span>
                            </a>
                        </div>
                        <div class="image"><img src="assets/images/others/app.png" alt=""></div>
                    </div>
                    <!--Download Content end-->

                </div>
            </div>
        </div>
    </div>
    <!--Download apps section end-->

    <!--Services section start-->
    <div class="service-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-70 pb-lg-50 pb-md-40 pb-sm-30 pb-xs-20">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>我们的服务</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row row-30 align-items-center">
                <div class="col-lg-5 col-12 mb-30">
                    <div class="property-slider-2">
                        <div th:each="propertyVO : ${weService}" class="property-2">
                            <div class="property-inner">
                                <a th:href="@{/single-properties.html}" class="image">
                                    <img src="assets/images/property/property-13.jpg" alt="">
                                </a>
                                <div class="content">
                                    <h4 class="title"><a th:href="@{/single-properties.html}"
                                                         th:text="${propertyVO.properties.title}"></a></h4>
                                    <span class="location" th:text="${propertyVO.properties.address}"></span>
                                    <h4 class="type" th:text="${propertyVO.propertiesRentType.typeName}"><span
                                            th:text="'￥'+${propertyVO.properties.sprice}"> <span>月</span></span></h4>
                                    <ul>
                                        <li th:text="${propertyVO.properties.roomNumber} + '卧'"></li>
                                        <li th:text="${propertyVO.properties.bathroomNumber} + '卫'"></li>
                                        <li th:text="${propertyVO.properties.garageNumber} + '车位'"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-12">
                    <div class="row row-20">

                        <!--Service start-->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="service">
                                <div class="service-inner">
                                    <div class="head">
                                        <div class="icon"><img src="assets/images/service/service-1.png" alt=""></div>
                                        <h4>房产购买</h4>
                                    </div>
                                    <div class="content">
                                        <p>房产交易属于大宗资产交易，市场准入有风险呢，请买卖双方自律。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Service end-->

                        <!--Service start-->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="service">
                                <div class="service-inner">
                                    <div class="head">
                                        <div class="icon"><img src="assets/images/service/service-2.png" alt=""></div>
                                        <h4>售卖房产</h4>
                                    </div>
                                    <div class="content">
                                        <p>房产交易属于大宗资产交易，市场准入有风险呢，请买卖双方自律。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Service end-->

                        <!--Service start-->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="service">
                                <div class="service-inner">
                                    <div class="head">
                                        <div class="icon"><img src="assets/images/service/service-3.png" alt=""></div>
                                        <h4>房产租赁</h4>
                                    </div>
                                    <div class="content">
                                        <p>房产交易属于大宗资产交易，市场准入有风险呢，请买卖双方自律。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Service end-->

                        <!--Service start-->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="service">
                                <div class="service-inner">
                                    <div class="head">
                                        <div class="icon"><img src="assets/images/service/service-4.png" alt=""></div>
                                        <h4>房产抵押</h4>
                                    </div>
                                    <div class="content">
                                        <p>房产交易属于大宗资产交易，市场准入有风险呢，请买卖双方自律。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Service end-->

                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--Services section end-->

    <!--New property section start-->
    <div class="property-section section pb-60 pb-lg-40 pb-md-30 pb-sm-20 pb-xs-10">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>新增加的房产</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">
                <!--Property start-->
                <div th:each="propertyVO : ${newAddOfProperty}" class="property-item col-lg-4 col-md-6 col-12 mb-40">
                    <div class="property-inner">
                        <div class="image">
                            <a th:href="@{/single-properties.html}"><img src="assets/images/property/property-1.jpg"
                                                                         alt=""></a>
                            <ul class="property-feature">
                                <li>
                                    <span class="area"><img src="assets/images/icons/area.png" alt=""
                                                            th:text="${propertyVO.properties.square} + ' 平米'"></span>
                                </li>
                                <li>
                                    <span class="bed"><img src="assets/images/icons/bed.png" alt=""
                                                           th:text="${propertyVO.properties.roomNumber}"></span>
                                </li>
                                <li>
                                    <span class="bath"><img src="assets/images/icons/bath.png" alt=""
                                                            th:text="${propertyVO.properties.bathroomNumber}" }></span>
                                </li>
                                <li>
                                    <span class="parking"><img src="assets/images/icons/parking.png" alt=""
                                                               th:text="${propertyVO.properties.garageNumber}"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="content">
                            <div class="left">
                                <h3 class="title"><a th:href="@{/single-properties.html}"
                                                     th:text="${propertyVO.properties.title}"></a></h3>
                                <span class="location"><img src="assets/images/icons/marker.png" alt=""
                                                            th:text="${propertyVO.properties.address}"></span>
                            </div>
                            <div class="right">
                                <div class="type-wrap">
                                    <span style="font-size: 16px" class="price"
                                          th:text="'￥'+${propertyVO.properties.price} + '/月'"><span></span></span>
                                    <span class="type" th:text="${propertyVO.propertiesRentType.typeName}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Property end-->
            </div>

        </div>
    </div>
    <!--New property section end-->

    <!--Funfact Section start-->
    <div class="funfact-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-70 pb-lg-50 pb-md-40 pb-sm-30 pb-xs-20"
         style="background-image: url(assets/images/bg/cta-bg.jpg)">
        <div class="container">
            <div class="row">

                <!--Funfact start-->
                <div class="single-fact col-lg-3 col-6 mb-30">
                    <div class="inner">
                        <div class="head">
                            <i class="pe-7s-home"></i>
                            <h3 class="counter">854</h3>
                        </div>
                        <p>完整项目</p>
                    </div>
                </div>
                <!--Funfact end-->

                <!--Funfact start-->
                <div class="single-fact col-lg-3 col-6 mb-30">
                    <div class="inner">
                        <div class="head">
                            <i class="pe-7s-graph3"></i>
                            <h3 class="counter">854</h3>
                        </div>
                        <p>已售房产</p>
                    </div>
                </div>
                <!--Funfact end-->

                <!--Funfact start-->
                <div class="single-fact col-lg-3 col-6 mb-30">
                    <div class="inner">
                        <div class="head">
                            <i class="pe-7s-users"></i>
                            <h3 class="counter">854</h3>
                        </div>
                        <p>幸运客户</p>
                    </div>
                </div>
                <!--Funfact end-->

                <!--Funfact start-->
                <div class="single-fact col-lg-3 col-6 mb-30">
                    <div class="inner">
                        <div class="head">
                            <i class="pe-7s-medal"></i>
                            <h3 class="counter">854</h3>
                        </div>
                        <p>幸运抽奖</p>
                    </div>
                </div>
                <!--Funfact end-->

            </div>
        </div>
    </div>
    <!--Funfact Section end-->

    <!--Agent Section start-->
    <div class="agent-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>我的代理</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">
                <div class="agent-carousel section">

                    <!--Agent satrt-->
                    <div th:each="agent : ${agents}" class="col">
                        <div class="agent">
                            <div class="image">
                                <a class="img" th:href="@{/agent-details.html}"><img
                                        src="assets/images/agent/agent-1.jpg" alt=""></a>
                                <div class="social">
                                    <!--                                    <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>-->
                                    <!--                                    <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>-->
                                    <!--                                    <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>-->
                                    <!--                                    <a href="#" class="google"><i class="fa fa-google-plus"></i></a>-->
                                </div>
                            </div>
                            <div class="content">
                                <h4 class="title"><a th:href="@{/agent-details.html}" th:text="${agent.user.name}"></a>
                                </h4>
                                <a href="#" class="phone" th:text="${agent.user.phone}"></a>
                                <a href="#" class="email" th:text="${agent.agent.email}"></a>
                                <span class="properties">5房</span>
                            </div>
                        </div>
                    </div>
                    <!--Agent end-->

                </div>
            </div>
        </div>
    </div>
    <!--Agent Section end-->

    <!--Testimonial Section start-->
    <div class="testimonial-section section bg-gray pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>客户留言</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">

                <!--Review start-->
                <div class="review-slider section">

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-1.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>John Carlson - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-2.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>Virginia Henry - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-3.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>Emma Romero - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-4.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>Russell Ortiz - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-5.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>Carol Palmer - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                    <div class="review col">
                        <div class="review-inner">
                            <div class="image"><img src="assets/images/review/review-6.jpg" alt=""></div>
                            <div class="content">
                                <p>房产交易平台the best theme for elit, sed do eiusmod tempor dolor sit amet, conse ctetur
                                    adipiscing elit.</p>
                                <h6>David Herrera - <span>CEO</span></h6>
                            </div>
                        </div>
                    </div>

                </div>
                <!--Review end-->

            </div>
        </div>
    </div>
    <!--Testimonial Section end-->

    <!--News Section start-->
    <div class="news-section section pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>房产最近新闻</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">
                <div class="news-carousel section">

                    <!--News start-->
                    <div th:each="recentNewsList : ${recentNewsList}" class="col">
                        <div class="news">
                            <div class="image">
                                <a th:href="@{/news-details.html}"><img src="assets/images/news/news-1.jpg" alt=""></a>
                                <div class="meta-wrap">
                                    <ul class="meta">
                                        <li>由 <a href="#" th:text="${recentNewsList.user.name}"></a></li>
                                        <li th:text="recentNewsList.news.date"></li>
                                    </ul>
                                    <ul class="meta back">
                                        <li>由 <a href="#" th:text="${recentNewsList.user.name}"></a></li>
                                        <li th:text="recentNewsList.news.date"></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="content">
                                <h4 class="title"><a th:href="@{/news-details.html}"></a></h4>
                                <div class="desc">
                                    <p th:text="${recentNewsList.news.content}"></p>
                                </div>
                                <a th:href="@{/news-details.html}" class="readmore">继续浏览</a>
                            </div>
                        </div>
                    </div>
                    <!--News end-->

                </div>
            </div>
        </div>
    </div>
    <!--News Section end-->

    <!--Brand section start-->
    <div class="brand-section section pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1>合作伙伴</h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->

            <div class="row">

                <!--Brand Slider start-->
                <div class="brand-carousel section">
                    <div class="brand col"><img src="assets/images/brands/brand-1.png" alt=""></div>
                    <div class="brand col"><img src="assets/images/brands/brand-2.png" alt=""></div>
                    <div class="brand col"><img src="assets/images/brands/brand-3.png" alt=""></div>
                    <div class="brand col"><img src="assets/images/brands/brand-4.png" alt=""></div>
                    <div class="brand col"><img src="assets/images/brands/brand-5.png" alt=""></div>
                    <div class="brand col"><img src="assets/images/brands/brand-6.png" alt=""></div>
                </div>
                <!--Brand Slider end-->

            </div>

        </div>
    </div>
    <!--Brand section end-->

    <!--Footer section start-->

    <!--引入底部样式-->
    <footer th:replace="layout :: footer"></footer>

    <!--    <footer class="footer-section section" style="background-image: url(assets/images/bg/footer-bg.jpg)">-->

    <!--        &lt;!&ndash;Footer Top start&ndash;&gt;-->
    <!--        <div class="footer-top section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-60 pb-lg-40 pb-md-30 pb-sm-20 pb-xs-10">-->
    <!--            <div class="container">-->
    <!--                <div class="row row-25">-->

    <!--                    &lt;!&ndash;Footer Widget start&ndash;&gt;-->
    <!--                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">-->
    <!--                        <img src="assets/images/logo-footer.png" alt="">-->
    <!--                        <p>房产交易平台the best theme for elit, sed do to eiumod tempor dolor sit amet, ctetur adipiscing elit seddo dolor sit amet.</p>-->
    <!--                        <div class="footer-social">-->
    <!--                            <a th:href="@{/#index.html}" class="facebook"><i class="fa fa-facebook"></i></a>-->
    <!--                            <a th:href="@{/#index.html}" class="twitter"><i class="fa fa-twitter"></i></a>-->
    <!--                            <a th:href="@{/#index.html}" class="linkedin"><i class="fa fa-linkedin"></i></a>-->
    <!--                            <a th:href="@{/#index.html}" class="google"><i class="fa fa-google-plus"></i></a>-->
    <!--                            <a th:href="@{/#index.html}" class="pinterest"><i class="fa fa-pinterest-p"></i></a>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                    &lt;!&ndash;Footer Widget end&ndash;&gt;-->

    <!--                    &lt;!&ndash;Footer Widget start&ndash;&gt;-->
    <!--                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">-->
    <!--                        <h4 class="title"><span class="text">联系我们</span><span class="shape"></span></h4>-->
    <!--                        <ul>-->
    <!--                            <li><i class="fa fa-map-o"></i><span>成都市高新区公兴保税区256号</span></li>-->
    <!--                            <li><i class="fa fa-phone"></i><span><a th:href="@{/#index.html}">+012 345 678 102</a><a th:href="@{/#index.html}">+012 345 678 101</a></span></li>-->
    <!--                            <li><i class="fa fa-envelope-o"></i><span><a th:href="@{/#index.html}">info@example.com</a><a th:href="@{/#index.html}">www.example.com</a></span></li>-->
    <!--                        </ul>-->
    <!--                    </div>-->
    <!--                    &lt;!&ndash;Footer Widget end&ndash;&gt;-->

    <!--                    &lt;!&ndash;Footer Widget start&ndash;&gt;-->
    <!--                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">-->
    <!--                        <h4 class="title"><span class="text">友情链接</span><span class="shape"></span></h4>-->
    <!--                        <ul>-->
    <!--                            <li><a th:href="@{/#index.html}">Rental Builidngs</a></li>-->
    <!--                            <li><a th:href="@{/#index.html}">Browe all Categories</a></li>-->
    <!--                            <li><a th:href="@{/#index.html}">Top Mortagages Rates</a></li>-->
    <!--                            <li><a th:href="@{/#index.html}">RentalTerms of use</a></li>-->
    <!--                            <li><a th:href="@{/#index.html}">Privacy Policy</a></li>-->
    <!--                        </ul>-->
    <!--                    </div>-->
    <!--                    &lt;!&ndash;Footer Widget end&ndash;&gt;-->

    <!--                    &lt;!&ndash;Footer Widget start&ndash;&gt;-->
    <!--                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">-->
    <!--                        <h4 class="title"><span class="text">通讯录</span><span class="shape"></span></h4>-->

    <!--                        <p>添加我们的最新的通讯录，您会得到最新房产信息，并且得到最低折扣</p>-->

    <!--                        <form id="mc-form" class="mc-form footer-newsletter" >-->
    <!--                            <input id="mc-email" type="email" autocomplete="off" placeholder="输入邮箱地址.." />-->
    <!--                            <button id="mc-submit"><i class="fa fa-paper-plane-o"></i></button>-->
    <!--                        </form>-->
    <!--                        &lt;!&ndash; mailchimp-alerts Start &ndash;&gt;-->
    <!--                        <div class="mailchimp-alerts text-centre">-->
    <!--                            <div class="mailchimp-submitting"></div>&lt;!&ndash; mailchimp-submitting end &ndash;&gt;-->
    <!--                            <div class="mailchimp-success"></div>&lt;!&ndash; mailchimp-success end &ndash;&gt;-->
    <!--                            <div class="mailchimp-error"></div>&lt;!&ndash; mailchimp-error end &ndash;&gt;-->
    <!--                        </div>&lt;!&ndash; mailchimp-alerts end &ndash;&gt;-->

    <!--                    </div>-->
    <!--                    &lt;!&ndash;Footer Widget end&ndash;&gt;-->

    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;Footer Top end&ndash;&gt;-->

    <!--        &lt;!&ndash;Footer bottom start&ndash;&gt;-->
    <!--        <div class="footer-bottom section">-->
    <!--            <div class="container">-->
    <!--                <div class="row">-->
    <!--                    <div class="col-12">-->
    <!--                        <div class="copyright text-center">-->
    <!--                            <p>Copyright &copy;2018 <a href="http://www.xuetang9.com">老九学堂</a>. 版权所有.</p>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;Footer bottom end&ndash;&gt;-->

    <!--    </footer>-->
    <!--Footer section end-->
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=b7drqKtNxm01mnrZgC01YjIAEWxEcFhf"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/map-place.js"></script>
<script src="assets/js/main.js"></script>
<script>
    // 创建Map实例
    let map = new BMap.Map("hero-map");
    // 初始化地图,设置中心点坐标和地图级别
    // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    //根据城市名设置地图中心
    map.centerAndZoom("成都", 15);
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(false);

    // 根据浏览器定位
    let geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            let mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
        } else {
            alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true})

    // 添加比例尺
    let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT, offset: {width: 30, height: 30}});// 左上角，添加比例尺
    map.addControl(top_left_control);
    //添加一个缩放控件
    let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    map.addControl(top_left_navigation);
</script>
</body>

</html>
